import React, {useEffect} from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Dimensions,
  ScrollView,
  FlatList
} from 'react-native';
import Api from '../../apis/Api.ts';
import Swiper from 'react-native-swiper';
import StoryItem from '../../components/story-item/index.tsx';
import type {StoryItemType} from '../../apis/story/story.service.ts';

const {width} = Dimensions.get('window');

function SwiperCom(prop: any) {
  const SwiperItem = (data: any) => {
    return (
      <View style={styles.swiperItem} key={data.id}>
        <Image
          style={styles.imageStyle}
          source={{
            uri: data
              ? Api.file.show(data.advertisementUrl)
              : Api.file.show('5e26e6ebff1c60a6f5ab2e5a0ada72c7'),
          }}></Image>
      </View>
    );
  };
  return (
    <Swiper
      style={styles.swiperStyle}
      horizontal={true}
      autoplay={true}
      loop={true}
      paginationStyle={{bottom: 10}}
      dotStyle={{backgroundColor: 'rgba(0,0,0,.2)', width: 6, height: 6}}
      activeDotStyle={{backgroundColor: 'rgba(0,0,0,.5)', width: 6, height: 6}}>
      {prop.item.length > 0
        ? prop.item.map((v: any) => SwiperItem(v))
        : SwiperItem('')}
    </Swiper>
  );
}

type Props = {
  navigation: any;
};

interface Story {
  name: string,
  key: string,
  value: string,
  list: StoryItemType[]
}

export default function HomeScreen({navigation}: Props) {
  const [swiperItem, setSwiperItem] = React.useState([] as any);
  const [storyType, setStoryType] = React.useState([
    {
      name: '热门AI故事',
      key: 'forwardNum',
      value: 'desc',
      list: [],
    },
    // {
    //   name: '重磅新品',
    //   key: 'id',
    //   value: 'desc',
    //   list: [],
    // },
    // {
    //   name: '精品推荐',
    //   key: 'collectNum',
    //   value: 'desc',
    //   list: [],
    // },
  ] as Story[]);

  async function getStory() {
    storyType.forEach((el, index) => {
      Api.story
        .storyPage({
          pageNo: 1,
          pageSize: 8,
          sort: [
            {
              key: el.key,
              value: el.value,
            },
          ],
        })
        .then((rs: any) => {
          // 获取当前数组的副本
          let newArray = [...storyType];
          // 修改指定索引处的元素
          newArray[index].list = rs.list; // index表示要修改的元素的索引位置，newValue表示要设置的新值
          // 更新状态变量
          setStoryType(newArray);
        });
    });
  }

  function getAdinfo() {
    Api.ad.getAdInfo({pageNo: 1, pageSize: 3}).then(rs => {
      setSwiperItem([...rs.list]);
    });
  }

  useEffect(() => {
    getAdinfo();
    getStory()
  }, []);

  return (
    <ScrollView>
      <View style={{flex: 1, backgroundColor: '#fff8f5'}}>
        <SwiperCom item={swiperItem}></SwiperCom>

        {storyType.map(item => (
          <View style={{width: '100%', paddingLeft: 10}}  key={item.key}>
            <View style={styles.top}>
              <Text style={styles.title}>{item.name}</Text>
              <Text
                style={{ color: '#bf9886' }}
                onPress={() =>
                  navigation.navigate('More', {
                    type: item.key,
                  })
                }>
                查看更多
              </Text>
            </View>
            <View>
                <FlatList
                  data={item.list}
                  renderItem={({item}) => <StoryItem item={item} />}
                  keyExtractor={(item, index) => index.toString()}
                  horizontal={true}
                />
            </View>
          </View>
        ))}

      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  stretch: {
    width: 480,
    resizeMode: 'stretch',
  },
  container: {
    flex: 1,
  },
  swiperStyle: {
    height: 300,
  },
  swiperItem: {
    width: width,
    height: 300,
  },
  imageStyle: {
    width: width,
    height: 300,
    // resizeMode:"stretch"
  },
  top: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',

  },
  title: {
    fontSize: 18,
    marginTop: 10,
    marginBottom: 10
  }
});
